import React from "react";

// const CommentList = ({comments})=>{
//     console.log(comments)
//     return(
//        <div className="comment-list-component">
//            <label>评论列表</label>
//            <ul className="list-group mb-3">
//                {
//                    comments.map((coment,index)=>(
//                        <li key={index} className="list-group-item">
//                            <span>{coment}  </span>
//                            <button type="button" className="btn btn-warning" onClick={this.onDelete}>删除</button>
//                        </li>
//                     ))
//                }
//            </ul>
//        </div> 
//     )
// }
class CommentList extends React.Component{
    constructor(props){
        super(props)
        this.state ={
            deleteIndex:''
        }
        // this.onDelete = this.onDelete.bind(this)
    }
    Delete(event){
        this.props.onDelete(this.deleteIndex)
       console.log(this.deleteIndex)
    }
    render(){
        return(
            <div className="comment-list-component">
            <label>评论列表</label>
            <ul className="list-group mb-3">
                {
                    this.props.comments.map((coment,index)=>(
                        <li key={index} className="list-group-item">
                            <span>{coment}  </span>
                            <button type="button" className="btn btn-warning" onClick={( )=>{this.deleteIndex = index;this.Delete()}}>删除</button>
                        </li>
                     ))
                }
            </ul>
        </div> 
        )
     }
}

export default CommentList